<template>
  <a-modal :visible="open" :width="860" :title="formTitle" @cancel="onClose">
    <a-form-model ref="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" :model="form" >
      <div class="orders-title">品质损失</div>
      <a-table class="orders-table" bordered :data-source="dataSource" :columns="columns" rowKey="key"
        :pagination="false">
      </a-table>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" label="补充说明" prop="illustrate">
            <a-textarea v-model="form.illustrate" placeholder="请输入补充说明" />
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
    <template slot="footer">
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script>
import baseUpload from '@/components/imgUpload/index.vue'
import { detailsInsert, approvalFlow } from '@/api/demo'
import { materialList } from "@/api/vehicle/orderinfo";
export default {
  name: 'CreateForm',
  props: {
  },
  components: {
    baseUpload,
  },
  data() {
    return {
      submitLoading: false,
      formTitle: '品质损失',
      id: null,
      vehicleId: null,
      processInstanceId: null,
      // 表单参数
      form: {
        illustrate: undefined,
      },
      open: false,
      dataSource: [
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'serial',
        },
        {
          title: '物料名称',
          dataIndex: 'device',
        },
        {
          title: '型号',
          dataIndex: 'size',
        },
        {
          title: '数量',
          dataIndex: 'count',
        },
        {
          title: '金额（元）',
          dataIndex: 'unit',
        },
      ],
    }
  },
  filters: {
  },
  created() {
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        illustrate: undefined,
      }
    },
    /** 接单按钮操作 */
    handleAdd(row) {
      this.id = row.id
      this.vehicleId = row.vehicleId
      this.processInstanceId = row.processInstanceId
      this.reset()
      materialList({ vehicleId: row.vehicleId, type: 3 }).then((res) => {
        res.data.forEach(((item, index) => item.serial = index + 1))
        this.dataSource = res.data
      })
      this.open = true
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.form.illustrate.length > 0) {
            const parms = {
              comments: `补充说明：${this.form.illustrate}`,
              infoId: this.vehicleId,
              type: 4
            }
            const res = await detailsInsert(parms)
            if (res.code !== 200) {
              this.$message.error(
                '评论失败',
                3
              )
              return;
            }
          }
          approvalFlow({ result: 'agree', processInstanceId: this.processInstanceId }).then(() => {
            this.$message.success(
              '审批成功',
              3
            )
            this.cancel()
            this.$emit('ok')
          }).catch((res) => {
            this.$message.error(
              '审批失败',
              3
            )

          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.orders-title {
  margin-bottom: 10px;
  font-size: 16px;
  color: black;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid #1890ff;
}

.orders-table {
  margin-bottom: 20px;
}
</style>
